<template>
  <ProPanel :groups="groups" :data="stageStore.layerData.data"> </ProPanel>
</template>

<script lang="ts" setup>
import ProPanel from '@/components/pro-panel/index.vue';
import { useStageStore } from '@/store/stage';
import describe from './groups/describe';
import bezier from './groups/bezier';
import locationConst from './groups/location';

const stageStore = useStageStore();
const groups = computed(() => {
  return [describe, bezier, location.value];
});
const location = computed(() => {
  const columns = stageStore.layerData.data?.points
    ?.map((x: any, i: number) => {
      return x.map((children: any, index: number) => {
        const title = locationConst[index];
        return [
          title,
          {
            label: '经度',
            prop: `points.${i}.${index}.0`,
            type: 'input-number',
            className: 'labelPositionLeft',
            formProps: { controls: false, min: -180, max: 180, labelWidth: 100, unit: '°' },
          },
          {
            label: '维度',
            prop: `points.${i}.${index}.1`,
            type: 'input-number',
            className: 'labelPositionLeft',
            formProps: { controls: false, min: -90, max: 90, unit: '°' },
          },
          {
            label: '高度',
            prop: `points.${i}.${index}.2`,
            type: 'input-number',
            className: 'labelPositionLeft',
            formProps: { controls: false, precision: 2, unit: '米' },
          },
        ];
      });
    })
    .flat(Infinity);
  return { title: '位置', key: 'location', collapsed: false, columns };
});
</script>

<style lang="less" scoped></style>
